<template>
  <footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{unDoneTodoLength}}</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters" @click="$emit('switchTodo',type)">
					<li>
						<a href="#/" :class="{selected:type==='all'}" @click="type='all'">All</a>
					</li>
					<li>
						<a href="#/active" 
						:class="{selected:type==='no'}"
						@click="type='no'">Active</a>
					</li>
					<li>
						<a href="#/completed"
						:class="{selected:type==='yes'}"
						@click="type='yes'"
						>Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button v-if='hasDoneTodo' class="clear-completed" @click="clear">Clear completed</button>
			</footer>
</template>

<script>
export default {
	data(){
		return {
			type:'all'//no yes
		}
	},
	props:['arr'],
	computed:{
		unDoneTodoLength(){
		return	this.arr.filter(item=>item.isDone===false).length
		},
		hasDoneTodo(){
		return	this.arr.some(item=>item.isDone===true)
		}
	},
	methods:{
		clear(){
			if(confirm('确定删除吗?')){
				this.$emit('clearHasDone')
			}
		}
	}
}
</script>

<style>

</style>
